<template>
  <div class="customerRefundPay">
    <el-form
      :model="thequery"
      ref="thequery"
      size="mini"
      style="margin: 0 0 20px 10px"
    >
      <div style="display: flex">
        <el-form-item
          label="退款申请号"
          style="display: flex; margin: 0 20px 0 0"
        >
          <el-input v-model="thequery.refundApplyNumber"></el-input>
        </el-form-item>
        <el-form-item
          label="转账状态"
          style="display: flex; margin: 0 20px 0 0"
        >
          <el-select v-model="thequery.transferRemark" clearable>
            <el-option label="待处理" value="stayDispose"></el-option>
            <el-option label="取消支付" value="cancelPay"></el-option>
            <el-option label="支付失败" value="payFailure"></el-option>
            <el-option label="支付成功" value="paySuccess"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="付款平台" style="display:flex;margin:0 10px 0 0">
          <el-select v-model="thequery.plfkformName" filterable placeholder="请选择" clearable>
            <el-option v-for="(item, index) in querySearch" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核时间" style="display: flex; margin: 0 20px 0 0">
          <el-date-picker type="date" v-model="thequery.reviewedTime" format="yyyy-MM-dd" placeholder="审核时间">
          </el-date-picker>
        </el-form-item> -->
        <!-- <el-form-item label="结束时间" style="display: flex; margin: 0 20px 0 0"> -->
        <!-- <el-date-picker type="date" v-model="thequery.reviewedTimeEnd" format="yyyy-MM-dd" placeholder="结束时间">
          </el-date-picker> -->
        <!-- </el-form-item> -->
        <el-form-item style="margin: 0 20px 0 50px">
          <el-button type="primary" size="mini" @click="searchairPort"
            >查询</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <!-- 表格 -->
    <el-table
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
      :data="auxiliary"
      size="mini"
      border
      stripe
    >
      <el-table-column
        label="退款申请号"
        prop="refundApplyNumber"
        width="160"
      ></el-table-column>
      <el-table-column label="状态" prop="transferStatus" width="100px">
        <template slot-scope="scope">
          <template v-if="scope.row.transferStatus == 'stayDispose'"
            >待处理</template
          >
          <template v-if="scope.row.transferStatus == 'cancelPay'"
            >取消支付</template
          >
          <template v-if="scope.row.transferStatus == 'payFailure'"
            >支付失败</template
          >
          <template v-if="scope.row.transferStatus == 'paySuccess'"
            >支付成功</template
          >
        </template>
      </el-table-column>
      <el-table-column
        label="转账金额"
        prop="transferMoney"
        width="100"
      ></el-table-column>
      <el-table-column label="开户人名称" prop="bankCardName"></el-table-column>
      <el-table-column
        label="银行卡卡号"
        width="100"
        prop="bankCardNumber"
      ></el-table-column>
      <el-table-column
        label="开户网点"
        width="80"
        prop="bankCardOpening"
      ></el-table-column>
      <el-table-column
        label="开户城市"
        width="80"
        prop="bankCardCity"
      ></el-table-column>
      <el-table-column
        label="银行名称"
        width="80"
        prop="bankName"
      ></el-table-column>
      <el-table-column
        label="转账流水号"
        prop="transferSerialNumber"
      ></el-table-column>
      <el-table-column label="审核人名称" prop="auditName"></el-table-column>
      <el-table-column
        label="审核时间"
        width="80"
        prop="auditDateTime"
      ></el-table-column>
      <!-- <el-table-column label="批量付款平台名称" width="150px" prop="plfkformName	">
        <template slot-scope="scope">
          <template v-if="scope.row.payType == 'unionPayApp'">银联云闪付APP</template>
          <template v-if="scope.row.payType == 'unionPayWeChat'">银联小程序微信</template>
          <template v-if="scope.row.payType == 'huaXiaPay'">华夏付款平台</template>
          <template v-if="scope.row.payType == 'trafficBank'">交行付款平台</template>
          <template v-if="scope.row.payType == 'agricultureBank'">农业银行付款平台</template>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="110" prop="employee">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="dealwithorder(scope.row)"
            size="mini"
            >处理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>
    <el-dialog
      title="处理"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
    >
      <el-descriptions class="margin-top" :column="3" :size="size" border>
        <el-descriptions-item>
          <template slot="label"> 退款申请号 </template>
          {{ application.refundApplyNumber }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 转账金额 </template>
          {{ application.transferMoney }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 开户人名称 </template>
          {{ application.bankCardName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 银行卡卡号 </template>
          {{ application.bankCardNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 开户城市 </template>
          {{ application.bankCardCity }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 银行名称 </template>
          {{ application.bankName }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 审核人名称 </template>
          {{ application.auditName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 审核时间 </template>
          {{ application.auditDateTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 退款状态 </template>
          <el-select
            v-model="application.transferStatus"
            size="mini"
            style="width: 140px"
            clearable
          >
            <el-option label="待处理" value="stayDispose"></el-option>
            <el-option label="取消支付" value="cancelPay"></el-option>
            <el-option label="支付失败" value="payFailure"></el-option>
            <el-option label="支付成功" value="paySuccess"></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 转账流水号 </template>
          <el-input
            v-model="application.transferSerialNumber"
            size="mini"
          ></el-input>
        </el-descriptions-item>
      </el-descriptions>

      <span slot="footer" class="footer">
        <!-- <el-button size="mini" @click="getupdApplyRefundRecoed('stayAudit')"
          >申请退款</el-button
        >
        <el-button
          type="primary"
          size="mini"
          @click="getupdApplyRefundRecoed('cancelApply')"
          >取消退款</el-button
        > -->
        <el-button type="primary" size="mini" @click="editMethod"
          >保存</el-button
        >
        <el-button type="primary" size="mini" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "customerRefundPay",
  data() {
    return {
      auxiliary: [
        {
          aaa: "",
        },
      ],
      dialogVisible: false,
      // 搜索条件
      thequery: {
        pageSize: "10",
        pageNo: "1",
        refundApplyNumber: null,
        transferRemark: null,
      },
      application: {},
      // 付款平台
      querySearch: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "银联云闪付APP",
          value: "unionPayApp",
        },
        {
          label: "银联小程序微信",
          value: "unionPayWeChat",
        },
        {
          label: "华夏付款平台",
          value: "huaXiaPay",
        },
        {
          label: "交行付款平台",
          value: "trafficBank",
        },
        {
          label: "农业银行付款平台",
          value: "agricultureBank",
        },
      ],
    };
  },
  methods: {
    // 批量处理按钮
    batchdispose() {},
    // 处理订单按钮
    dealwithorder(row) {
      console.log(row);
      // this.$router.push({
      //   name: "batchpayment",
      //   params: { batchNumber: row.batchNumber }
      // })
      this.$axios
        .getTransferRecordInfo({
          id: row.id,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.application = res.data;
            this.dialogVisible = !this.dialogVisible;
          }
        });
    },
    // 查询列表数据
    getTransferRecordList() {
      this.$axios
        .getTransferRecordList({
          refundApplyNumber: this.thequery.refundApplyNumber,
          transferRemark: this.thequery.transferRemark,
          pageSize: this.thequery.pageSize,
          pageNo: this.thequery.pageNo,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.auxiliary = res.data.records;
          }
        });
    },
    // 保存按钮
    editMethod() {
      this.$axios
        .updTransferRecord({
          id: this.application.id,
          transferStatus: this.application.transferStatus,
          transferSerialNumber: this.application.transferSerialNumber,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.$message({
              message: "成功",
              type: "success",
            });
            this.dialogVisible = !this.dialogVisible;
            this.getTransferRecordList();
          }
        });
    },
    // 查询按钮
    searchairPort() {
      (this.thequery.pageSize = 10),
        (this.thequery.pageNo = 1),
        this.getTransferRecordList();
    },
    //分页
    handleSizeChange(value) {
      this.thequery.pageSize = value;
      this.getTransferRecordList();
    },
    handleCurrentChange(value) {
      this.thequery.pageNo = value;
      this.getTransferRecordList();
    },
  },
  mounted() {
    this.getTransferRecordList();
  },
};
</script>

<style  scoped>
.customerRefundPay {
  margin: 20px;
}
</style>